<template>
  <div class="lower-wrapper">
    <div class="invite-title"><a href="javascript:;" @click="returnHref"><img src="../../assets/img/return.png"></a><p>授权大区经理</p></div>
    <div class="lower-head">
      <ul>
        <li>
          <label>UID</label>
          <el-input size="mini" placeholder="请输入用户ID" v-model="agentId" type="number" class="lower-userId"></el-input>
        </li>
        <li>
          <label>分成比例：</label>
          <el-input size="mini" placeholder="请输入分成比例" v-model="teamRatio" type="number" class="lower-userId" style="width:2rem"><template slot="append">%</template></el-input>
        </li>
        <li><h3>全部人数：<span>{{total}}</span>人</h3></li>
        <li><a href="javascript:;" @click="warrant">授权</a></li>
      </ul>
    </div>
    <div class="lower-content">
      <el-table
        :data="tableData"
        v-loading="listLoading"
        stripe
        style="width: 100%">
        <el-table-column
          prop="userid"
          label="UID"
          width="80">
        </el-table-column>
        <el-table-column
          prop="nickname"
          label="昵称"
          min-width="100">
          <template slot-scope="scope">
            <span >{{scope.row.nickname | baseName}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="teamRatio"
          label="分成比例%"
          width="100">
        </el-table-column>
      </el-table>
      <el-pagination
        background
        :pager-count="5"
        layout="prev, pager, next"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
    export default {
        name: "lower",
      data(){
          return{
            options2: [
              {
              value: '0',
              label: '所有'
            }, {
              value: '1',
              label: '代理'
            }, {
              value: '2',
              label: '玩家'
            }
            ],
            agentType: '0',
            agentId:'',
            listLoading:false,
            pageIndex:1,
            pageSize:this.global().pageSize,
            total:0,
            teamRatio:'',
            tableData: [
              // {userId: '545020', nickname: '王小虎王小虎王小虎',  teamRatio:0},
              // {userId: '545020', nickname: '阿斯蒂芬',  teamRatio:1},
              // {userId: '545020', nickname: '撒旦法', teamRatio:1},
              // {userId: '545020', nickname: '歌功颂德', teamRatio:0}
            ]
          }
      },
      created(){
        this.getAgent()
      },
      methods:{
        returnHref(){
          this.$router.go(-1)
        },
        getAgent(){
          this.listLoading = true;
          this.$axios.get('/sub-agents',{},this.global().token).then((res)=>{
            if(res.status == 200){
              this.total = res.data.count
              this.tableData = res.data.data
              this.listLoading = false;
            }
          })
        },
        warrant(){
          if(this.agentId == ''){
            this.$message({message: '请输入用户ID', type: 'error',duration:1200});
            return
          }
          if(this.teamRatio == ''){
            this.$message({message: '请输入授权比例', type: 'error',duration:1200});
            return
          }
          this.$axios.patch('/agent/'+this.agentId+'/team-ratio',{teamRatio:this.teamRatio},this.global().token).then((res)=>{
            if(res.status == 200){
              this.$message({message: '授权成功', type: 'success',duration:1200});
              this.agentId = ''
              this.teamRatio = ''
              this.getAgent()
            }else{
              this.$message({message: res.data, type: 'error',duration:1200});
            }
          })
        }
      }
    }
</script>

<style scoped lang="stylus">
  @import "../../assets/css/title.styl"
  @import "../../assets/css/table.styl"
  .lower-head
    &>ul>li>label
      flex 0 0 .8rem
</style>
